<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>


        /*@media screen and (device-width: 560px) and (device-height: 700px) {*/
        /*    !*对应该屏幕设备的样式都写这里*!*/
        /*    li:nth-child(1){*/
        /*        background-color: red;*/
        /*    }*/
        /*}*/

        /*@media screen and (device-width: 800px) and (device-height: 600px) {*/
        /*    !*对应该屏幕设备的样式都写这里*!*/
        /*    li:nth-child(2){*/
        /*        background-color: tomato;*/
        /*    }*/
        /*}*/

        /*@media screen and (device-width: 1200px){*/
        /*    !*对应该屏幕设备的样式都写这里*!*/
        /*    li:nth-child(3){*/
        /*        background-color: orange;*/
        /*    }*/
        /*}*/

        /*以上这种方式，写法很麻烦，不推荐*/







        /*
            以下这种方式，要结合：
                <meta name="viewport" content="width=device-width,initial-scale=1.0">
            使用
         */

        /*屏幕的宽度  < 560px */
        @media screen and (max-width: 560px) {
            body{
                background-color: pink;
            }
        }
        
        
        /* 屏幕的宽度 >561px  和 <699px   */
        @media screen and (min-width: 561px) and (max-width: 799px){
            li:nth-child(1){
                background-color: tomato;
            }
        }


        /* 屏幕的宽度 >800px  和 <1199px   */
        @media screen and (min-width: 800px) and (max-width: 1199px){
            li:nth-child(1){
                background-color: blue;
            }
        }

        /*屏幕的宽度  > 1200px */
        @media screen and (min-width: 1200px) {
            body{
                background-color: yellow;
            }
        }



    </style>


</head>
<body>

<ul>
    <li>手机设备560*700</li>
    <li>pad设备800*600</li>
    <li>pc设备1200</li>
</ul>

</body>
</html>